<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="back" @click="goBack">＜</text>
			<text class="title">待评价订单</text>
			<view class="right-icons"></view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-section">
				<view class="info-header">
					<text>订单信息</text>
					<text class="status">{{formatOrderStatus(orderInfo.orderStatus)}}</text>
				</view>
				<view class="divider"></view>
				<view class="info-item">
					<text class="label">订单号：</text>
					<text class="value">{{orderInfo.orderNum}}</text>
				</view>
				<view class="info-item">
					<text class="label">服务项目：</text>
					<text class="value">{{serviceInfo.serviceName}}</text>
				</view>
				<view class="info-item">
					<text class="label">服务门店：</text>
					<text class="value">{{shopInfo.name}}</text>
					<image class="icon-arrow" src="/static/mp/plane.png"></image>
				</view>
				<view class="info-item">
					<text class="label">下单时间：</text>
					<text class="value">{{orderInfo.orderTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">预约时间：</text>
					<text class="value">{{orderInfo.reservationTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">车辆：</text>
					<text class="value">奔驰FWE4/豫A98FHJ</text>
				</view>
				<view class="info-item">
					<text class="label">备注：</text>
					<text class="value"></text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<image class="img" src="/static/mp/客服.png"></image>
			<text class="tex">联系客服</text>
			<button class="btn1" @click="goComment">立即评价</button>
		</view>
	</view>
</template>

<script>
import request from '../../uitls/request'

	export default {
		data() {
			return {
				orderId:'',
				orderInfo:{},
				serviceInfo:{},
				shopInfo:{},
				}
			
		},
		onLoad(option) {
			if(option.id){
				this.handleWaitUse(option.id)
			}
			console.log('当前订单ID:', option.id);
		},
		methods: {
			goComment(){
				console.log('传递参数:', { 
            merchantId: this.orderInfo.merchantId,
			orderId:this.orderInfo.id,
        })
		uni.navigateTo({
            url:`/pages/goComment/goComment?merchantId=${this.orderInfo.merchantId}&orderId=${this.orderInfo.id}` 
        })
			},
			formatOrderStatus(status) {
				const statusMap = {
					0: '待支付',
					1: '待使用',
					2:'待评价',
				};
				return statusMap[status] || '未知状态';
			},
			goBack() {
				uni.navigateBack()
			},
			handleWaitUse(id) {
        request({
            url:`/offer/orders/${id}`,
            method:'GET',
            header:{
                Authorization:uni.getStorageSync('token')
            },
            success:(res)=>{
                if(res.data.code===200){
                    this.orderInfo=res.data.data;
					this.enterService(this.orderInfo.serviceId)
					this.enterShop(this.orderInfo.merchantId)
					// console.log('当前服务ID:', this.orderInfo.serviceId);
					// console.log('当前的商户ID:',this.orderInfo.merchantId)
                }
                console.log(this.orderInfo.verificationCode)
            }
        })
    },
	enterService(serviceId){
		request({
			url:`/evaluate/details/${serviceId}`,
			method:'GET',
			header:{
				Authorization:uni.getStorageInfoSync('token')
			},
			success:(res)=>{
				if(res.data.code===200){
					this.serviceInfo=res.data.data;
				}
				console.log(this.serviceInfo.serviceName)
			}
		})
	},
	enterShop(merchantId){
		request({
			url:`/merchant/merchant/${merchantId}`,
			method:'GET',
			header:{
				Authorization:uni.getStorageInfoSync('token')
			},
			success:(res)=>{
				if(res.data.code===200){
					this.shopInfo=res.data.data;
				}	
				console.log(this.shopInfo.name)
			}	
		})
	},
	handleQrCode() {
      uni.showLoading({ title: '处理中...' })
      request({
        url: '/offer/orders',
        method: 'PUT',
		data:{
			...this.orderInfo,
			orderStatus:2
		},
        header: {
          Authorization: uni.getStorageSync('token')
        },
        success: (res) => {
                    if (res.data.code === 200) {
						this.orderInfo.orderInfo=2;
						uni.$emit('updateOrderStatus');
						this.handleWaitUse(this.orderInfo.id)
                      uni.redirectTo({
                        url: '/pages/jackwang/wodedingdan/wodedingdan?tab=待评价'
                      })
                    } else {
                        uni.showToast({ title: res.data.msg, icon: 'none' }) 
                    }
					console.log(res.data.code)
					console.log()
                },
        complete: () => {
          uni.hideLoading()
        }
      })
    }
		},
		
	}
</script>

<style lang="scss">
	.container {
		/* #ifdef MP-WEIXIN */
		margin-top: 70rpx;
		/* #endif */
		background: url(/static/mp/背景版.png);
		background-size: 100% 35%;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding-bottom: 100rpx;
		
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 30rpx 20rpx 30rpx;
			color: #fff;
			
			.back {
				font-size: 28px;
				margin-right: 10px;
			}
			
			.title {
				font-size: 18px;
			}
			
			.right-icons {
				display: flex;
				gap: 20rpx;
				width: 90rpx;
			}
		}

		.qrcode-section {
			background: #fff;
			margin: 20rpx;
			padding: 30rpx;
			border-radius: 25rpx;
			text-align: center;

			.code-title {
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}

			.qrcode {
				width: 300rpx;
				height: 300rpx;
				margin: 0 auto;
			}
		}
		
		.order-info {
			margin: 20rpx;
			margin-bottom: 100rpx;
			
			.info-section {
				background: #fff;
				padding: 30rpx;
				border-radius: 25rpx;
				margin-bottom: 20rpx;

				.divider {
					height: 7rpx;
					background: #eee;
					margin: 20rpx 0;
				}
				
				.info-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					font-size: 32rpx;
					
					.status {
						color: #ff5e2d;
					}
				}
				
				.info-item {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					
					.label {
						color: #666;
						width: 160rpx;
					}
					
					.value {
						color: #333;
					}
					
					.icon-arrow {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
			
			.price-section {
				background: #fff;
				padding: 30rpx;
				border-radius: 25rpx;
				margin-bottom: 20rpx;
				
				.section-title {
					font-size: 32rpx;
					font-weight: 500;
					margin-bottom: 30rpx;
				}
				
				.price-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					
					&.discount .value {
						color: #f44336;
					}
					
					&.total {
						margin-top: 20rpx;
						font-weight: 500;
						
						.value {
							color: #4CAF50;
						}
					}
				}
				
				.divider {
					height: 2rpx;
					background: #eee;
					margin: 20rpx 0;
				}
				.divider1 {
					height: 7rpx;
					background: #eee;
					margin: 20rpx 0;
				}
			}
		}
		
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
			
			.img {
				width: 52rpx;
				height: 52rpx;
			}
			.tex {
				font-weight: bold;
				margin-left: 10rpx;
			}
			.btn1 {
				background-color: #bfbfbf;
				border-radius: 50rpx;
				width: 210rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #fff;
				margin-left: 270rpx;
			}
		}
	}
</style>
